<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>高均钰区块链钱包</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
    <style type="text/css">
        body {
           width: 600px;
           height: 800px;
           overflow: hidden;
        }
        #Blockcontent{
          width: 550px;
          height: 120px;
        }
        #Transactionscontent{
          width: 550px;
          height: 100px;
        }
    </style>
</head>

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="popup.js"></script>
<body>
  <!--参考文档 https://v5.bootcss.com/docs/getting-started/introduction/ -->
  <div class="container">
    <div class="row justify-content-center align-items-center g-2">
      <div class="col"> 高均钰区块链钱包.</div>
      <div class="col"></div>
      <div class="col">
        <div class="btn-group">
        

          <select class="form-select form-select-lg mb-3" id="select_vale" aria-label=".form-select-lg example">
            <option selected="">选择服务器</option>
            <option value="http://127.0.0.1:5000">5000</option>
            <option value="http://127.0.0.1:5001">5001</option>
            <option value="http://127.0.0.1:5002">5002</option>
          </select>
          
        </div>

      </div>
    </div>
    <hr>

    <nav>
      <div class="nav nav-tabs" id="nav-tab" role="tablist">
        <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button"
          role="tab" aria-controls="nav-home" aria-selected="true">账户信息</button>
        <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button"
          role="tab" aria-controls="nav-profile" aria-selected="false">转账</button>
          <button class="nav-link" id="nav-blockserve-tab" data-bs-toggle="tab" data-bs-target="#nav-blockserve" type="button"
          role="tab" aria-controls="nav-blockserve" aria-selected="false">单区块操作</button>
        <button class="nav-link" id="nav-transactions-tab" data-bs-toggle="tab" data-bs-target="#nav-transactions" type="button"
          role="tab" aria-controls="nav-transactions" aria-selected="false">历史交易&历史区块信息</button>

      </div>
    </nav>
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">
        <div class="mb-3 my-3">
          <label for="inputPrivateKey" class="form-label">私钥</label>
          <input type="text" class="form-control" id="inputPrivateKey" placeholder="私钥">
        </div>

        <div class="mb-3 my-3">
          <label for="inputLoadPrivateKey" class="form-label">加载输入私钥</label>
          <input type="text" class="form-control" id="inputLoadPrivateKey" placeholder="输入加载私钥">
        </div>

        <div class="mb-3">
          <button type="button" id="load_waller" class="btn btn-primary btn-sm">加载私钥</button>
          <button type="button" id="wallet_create" class="btn btn-success btn-sm">生成随机钱包</button>
          <button type="button" id="wallet_get" class="btn btn-warning btn-sm">获取账户json对象</button>
          <button type="button" id="clear_button" class="btn btn-info btn-sm">清除数据</button>
        </div>
        <div class="mb-3">
          <label for="inputPublic" class="form-label" >公钥</label>
          <input type="text" class="form-control" id="inputPublic"  placeholder="公钥" disabled readonly>
        </div>

        <div class="mb-3">
          <label for="inputLoadAddress" class="form-label">账户地址</label>
          <input type="text" class="form-control" id="inputLoadAddress" placeholder="账户地址"  readonly>
        </div>

        <div class="mb-3">
          <label for="inputAddress" class="form-label">需要查询账户地址</label>
          <input type="text" class="form-control" id="inputAddress" placeholder="账户地址" >
        </div>
        <div class="mb-3">
          <button type="button" id="walletMine_query" class="btn btn-danger btn-sm">查询钱包余额</button>
        </div>
      </div>


      <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">
        <div class="mb-3 my-3">
          <label for="inputReceiveAddress" class="form-label">接收者账户地址</label>
          <input type="text" class="form-control" id="inputReceiveAddress" placeholder="接收者账户地址">
        </div>
        <div class="mb-3">
          <label for="inputAmount" class="form-label">金额</label>
          <input type="text" class="form-control" id="inputAmount" placeholder="金额">
        </div>

        <div class="mb-3 d-flex justify-content-center ">
          <button type="submit" class="btn btn-primary ml-auto" id="buttonTransaction">确认</button>
        </div>
      </div>

       <!-- 单区块操作 -->
       <div class="tab-pane fade" id="nav-blockserve" role="tabpanel" aria-labelledby="nav-blockserve-tab" tabindex="0">
        <div class="mb-3 my-3">
          <label for="inputBlockNumber" class="form-label">区块编号(Number)</label>
          <input type="text" class="form-control" id="inputBlockNumber" placeholder="需要查询区块的编号">
        </div>
        <div class="mb-3 d-flex justify-content-center ">
          <button type="submit" class="btn btn-success btn-sm ml-auto" id="SearchByNumber">通过编号查询</button>
        </div>
        <div class="mb-3">
          <label for="inputBlockHash" class="form-label">区块哈希(Hash)</label>
          <input type="text" class="form-control" id="inputBlockHash" placeholder="需要查询区块哈希">
        </div>
        <div class="mb-3 d-flex justify-content-center ">
          <button type="submit" class="btn btn-warning btn-sm ml-auto" id="SearchByHash">通过哈希查询</button>
        </div>
        <div class="mb-3">
          <label for="inputBlockPreviousHash" class="form-label">交易哈希(PreviousHash)</label>
          <input type="text" class="form-control" id="inputBlockPreviousHash" placeholder="需要查询区块哈希">
        </div>
        <div class="mb-3 d-flex justify-content-center ">
          <button type="submit" class="btn btn-info btn-sm ml-auto" id="SearchByPreviousHash">通过哈希查询</button>
        </div>
      </div>

      <!-- //交易记录 -->
      <div class="tab-pane fade" id="nav-transactions" role="tabpanel" aria-labelledby="nav-transactions-tab" tabindex="0">
        <button type="button" id="getTransactionsContent" class="btn btn-primary btn-sm mx-auto my-3">点击加载历史交易信息</button>
          <div class="form-floating">
            <textarea class="form-control mx-auto" placeholder="Leave a comment here" id="Transactionscontent"></textarea>
            <label for="Transactionscontent">交易历史信息</label>
        <button type="button" id="getBlockContent" class="btn btn-success btn-sm mx-auto my-4">点击加载历史区块信息</button>
          <div class="form-floating">
            <textarea class="form-control mx-auto" placeholder="Leave a comment here" id="Blockcontent"></textarea>
            <label for="Blockcontent">区块历史信息</label>    
      </div>
    </div>
  </div>


  <script src="bootstrap.bundle.min.js"
  integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
  crossorigin="anonymous"></script>
</body>
</body>

</html>